import React from 'react';
import {
  Box, Typography, Grid, TextField, Paper, Button, Stepper, Step, StepLabel,
  Divider, IconButton,ThemeProvider,CssBaseline
} from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import EditIcon from '@mui/icons-material/Edit';
import ArchiveIcon from '@mui/icons-material/Archive';
import SendIcon from '@mui/icons-material/Send';
import FeedbackIcon from '@mui/icons-material/Feedback';
import BarChartIcon from '@mui/icons-material/BarChart';
import theme from "../themes/theme "

const steps = ['完成自评', '提交审核', '主管审核', '系统归档'];

const SelfAssessmentPage = () => {
  return (
  <ThemeProvider theme={theme}>
      <CssBaseline />  
    <Box sx={{ display: 'flex', height: '100vh', background: 'radial-gradient(ellipse at center, #0A2740 0%, #0B1C2C 100%)', color: '#fff' }}>
      {/* 左侧导航栏 */}
      <Box sx={{ width: 280, p: 3, borderRight: '1px solid #1E3A5F' }}>
        <Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
          <CheckCircleIcon sx={{ color: '#FF9800', mr: 1 }} />
          干系人自评界面
        </Typography>

        <Typography variant="subtitle2" gutterBottom>自评导航</Typography>
        <Box sx={{ ml: 1 }}>
          <Step active completed>
            <StepLabel>部门基本信息</StepLabel>
          </Step>
          <Step>
            <StepLabel>能力域一评估</StepLabel>
          </Step>
          <Step>
            <StepLabel>能力域二评估</StepLabel>
          </Step>
        </Box>

        <Divider sx={{ my: 2, borderColor: '#3A4C6A' }} />

        <Typography variant="subtitle2" gutterBottom>🧾 评审审核与归档流程</Typography>
        <Box sx={{ ml: 1 }}>
          <Step>
            <StepLabel>支撑材料上传</StepLabel>
          </Step>
          <Step active>
            <StepLabel>提交与审核</StepLabel>
          </Step>
        </Box>

        <Box sx={{ mt: 4, p: 1, backgroundColor: 'rgba(255, 152, 0, 0.1)', borderRadius: 1 }}>
          <Typography variant="body2" color="#FF9800">
            🔄 支持进度保存，随时继续
          </Typography>
        </Box>
      </Box>

      {/* 右侧主内容区 */}
      <Box sx={{ flex: 1, p: 4 }}>
        <Paper sx={{ backgroundColor: 'rgba(0, 60, 100, 0.4)', p: 3, mb: 3 }}>
          <Typography variant="h6" gutterBottom>部门基本信息</Typography>
          <Grid container spacing={2}>
            <Grid item xs={6}>
              <TextField fullWidth label="部门名称" value="市场营销部" variant="filled" InputLabelProps={{ style: { color: '#B0BEC5' } }} InputProps={{ style: { color: '#fff' } }} />
            </Grid>
            <Grid item xs={6}>
              <TextField fullWidth label="部门负责人" value="张经理" variant="filled" InputLabelProps={{ style: { color: '#B0BEC5' } }} InputProps={{ style: { color: '#fff' } }} />
            </Grid>
            <Grid item xs={6}>
              <TextField fullWidth label="评估日期" value="2025-06-15" variant="filled" InputLabelProps={{ style: { color: '#B0BEC5' } }} InputProps={{ style: { color: '#fff' } }} />
            </Grid>
            <Grid item xs={6}>
              <TextField fullWidth label="评估周期" value="2025 年第二季度" variant="filled" InputLabelProps={{ style: { color: '#B0BEC5' } }} InputProps={{ style: { color: '#fff' } }} />
            </Grid>
          </Grid>
        </Paper>

        {/* 流程引导区域 */}
        <Box display="flex" justifyContent="space-between" alignItems="center" mt={4}>
          <StepBox icon={<EditIcon />} label="完成自评" subtext="干系人完成所有评分与材料上传" />
          <Arrow />
          <StepBox icon={<SendIcon />} label="提交审核" subtext="系统自动检查完整性并提交上级" />
          <Arrow />
          <StepBox icon={<AssignmentTurnedInIcon />} label="主管审核" subtext="主管确认或退回修改" />
          <Arrow />
          <StepBox icon={<ArchiveIcon />} label="系统归档" subtext="归档评估材料与整体评估" />
        </Box>

        {/* 按钮区 */}
        <Box mt={4} display="flex" gap={2} flexWrap="wrap">
          <Button variant="outlined" color="info" startIcon={<CloudUploadIcon />}>支持证明材料批量上传</Button>
          <Button variant="outlined" color="warning" startIcon={<FeedbackIcon />}>审核人可添加反馈建议</Button>
          <Button variant="outlined" color="secondary" startIcon={<BarChartIcon />}>自动生成部门能力雷达图</Button>
          <Box ml="auto">
            <Button variant="contained" color="primary" sx={{ mr: 2 }}>保存草稿</Button>
            <Button variant="contained" color="success" endIcon={<SendIcon />}>同步提交</Button>
          </Box>
        </Box>
      </Box>
    </Box>
  </ThemeProvider>  
  );
};

const StepBox = ({ icon, label, subtext }: { icon: React.ReactNode, label: string, subtext: string }) => (
  <Box sx={{ textAlign: 'center' }}>
    <Box sx={{ bgcolor: '#1976d2', borderRadius: '50%', width: 56, height: 56, display: 'flex', justifyContent: 'center', alignItems: 'center', mx: 'auto', mb: 1 }}>
      {icon}
    </Box>
    <Typography variant="subtitle2">{label}</Typography>
    <Typography variant="caption" color="gray">{subtext}</Typography>
  </Box>
);

const Arrow = () => (
  <Box sx={{ width: 24, height: 2, bgcolor: '#64B5F6', mx: 1, alignSelf: 'center' }} />
);

export default SelfAssessmentPage;
